<template>
	<view>
		<view>
			<map :latitude="latitude" 
			:id="maps"
			@tap="mapTap"
			:longitude="longitude" 
			:markers="markers"
			:polyline="polyline"
			:enable-scroll="true"
			:scale="scale">
				</map>
				</view>
		<view class="content">
			<!-- <view class="box-header">
				<view class="cancel" @click="cancelSelAddress">取消</view>
				<view class="confim">确定</view>
			</view> -->
			<view class="box" @touchstart="move.touchstart" @touchend="move.touchend"  :data-lastop="footerHeight"
				@touchmove="move.touchmove">
				<view class="nowTitle">当前定位</view>
				<!-- <view style="z-index: 9999999;" @click="showNearAddress">
					<image class="c_img" src="../../static/c_up.png" mode="aspectFill"></image>
				</view> -->
				<view class="scsList">
					<view class="addressItem" v-for="(item,index) in scsList" >
						<view class="addressLeft">
							<view class="b_title">{{item.name}}</view>
							<view class="b_t_title">{{item.address}}</view>
						</view>
						<view class="dist">{{Math.floor(item.distance)}}m</view>
						<view class="addressRight" @click="chooseAddress(item)">
							<image src="../../static/agree_no.png" mode="aspectFill"></image>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>
<script module="move" lang="wxs" src="./choose-map.wxs"></script>
<script>
	export default {
		data() {
			return {
				timeOver: false,
				latitude: 29.60642,
				longitude: 106.57428,
				markers: [],
				polyline: [],
				scale: 16,
				footerHeight: 0,
				selAddress:false,
				scsList:[],
				markers: []
			};
		},
		onLoad(option) {
			let that = this
			that.latitude = option.lat
			that.longitude = option.lon
			this.getScsList()
		},
		mounted() {
			this.getFooterHeight();
		},
		methods: {
			// 这里可以做一个scroll-y  的判断。 内部滚动
			changeHeight(val) {
				console.log(val)
			},
			mapTap(e){
				var that = this;
				that.latitude = e.detail.latitude
				that.longitude = e.detail.longitude
				that.markers = [
					{
						latitude: e.detail.latitude,//纬度
						longitude: e.detail.longitude,//经度
						iconPath:'/static/dizhi.png',
						width:13,
						height:20
					}
				]
				this.getScsList()
			},
			chooseAddress(e){
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				prevPage.$vm.selScsId = e.id;   //修改上一页data里面的searchVal参数值为1211
				prevPage.$vm.selScsLat = e.latitude
				prevPage.$vm.selScsLon = e.longitude
				prevPage.$vm.selScsName = e.name
				let data = {name:e.name,latitude:e.latitude,longitude:e.longitude,id:e.id}
				this.$store.dispatch('setBaseAddress',data)
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			getFooterHeight() {
				let query = wx.createSelectorQuery();
				query
					.select('.box')
					.boundingClientRect(res => {
						console.log(res);
						let height = res.height;
						this.footerHeight = res.height
					})
					.exec();
			},
			cancelSelAddress(){
				uni.navigateBack({
					delta:1
				})
			},
			getScsList(){
				let that = this
				let postData = {latitude:that.latitude,longitude:that.longitude}
				this.$api.community.getCommunityList(postData)
				.then(res => {
					if(res.code == 200){
						this.scsList = res.data
					}else{
						this.$commonJs.showToast.showNoneToast(res.err)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			}
		},

	};
</script>
<style lang="scss" scoped>
	map {
		width: 100%;
		height: 80vh;
	}
	.c_img{
		width: 40rpx;
		height: 40rpx;
		top: -18px;
		position: relative;
		z-index: 99999999;
	}
	.scsList{
		overflow-y: scroll;
		display: inline-block;
		z-index: 100;
	}
	.nowTitle{
		font-size: 24rpx;
		color: #999999;
		margin: 32rpx 0 0 36rpx;
		float: left;
		width: 100%;
		text-align: left;
	}
	.addressItem:first-child{
		margin-top: 24rpx;
	}
	.addressItem{
		width: 100%;
		float: left;
		margin-top: 24rpx;
		margin-bottom: 20rpx;
	}
	.addressLeft{
		width: 510rpx;
		float: left;
		margin-left: 36rpx;
		text-align: left;
	}
	.dist{
		width: 50rpx;
		float: left;
		text-align: left;
		line-height: 70rpx;
		color: #999999;
		font-size: 24rpx;
	}
	.addressLeft .b_title{
		color: #252631;
		font-size: 28rpx;
		width: 560rpx;
		float: left;
	}
	.addressLeft .b_t_title{
		color: #999999;
		font-size: 24rpx;
		width: 560rpx;
	}
	.addressRight{
		width: 80rpx;
		float: right;
		margin-right: 40rpx;
	}
	.addressRight image{
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
	}
	.content {
		position: fixed;
		background: #FFFFFF;
		width: 100%;
		bottom: 0;
		padding: 0 0 68upx 0;
		z-index: 88;
		text-align: center;
		color: #252631;
		border-radius: 24rpx 24rpx 0 0;
	}
	.box-header{
		height: 140rpx;
		width: 750rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 88;
	}
	.box-header .cancel{
		line-height: 140rpx;
		padding-left: 40rpx;
		float: left;
		color: #252631;
		font-size: 28rpx;
		font-weight: 700;
	}
	.box-header .confim{
		line-height: 140rpx;
		padding-right: 40rpx;
		float: right;
		color: #252631;
		font-size: 28rpx;
		font-weight: 700;
	}
	.box {
		height: calc(100vh - 80vh);
	}
</style>
